<template>
  <el-dialog title="上传图片" :visible="uploadVisible" width="50%" :before-close="handleClose" :close-on-click-modal="false" append-to-body>
    <el-form ref="form" label-position="left" :model="upload" label-width="80px" class="upload-picture">
      <el-form-item label="上传到">
        <el-select v-model="upload.category" placeholder="请选择分组" size="small">
          <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="本地文件">
        <el-upload
          ref="upload"
          class="upload-container"
          action=""
          accept="image/*"
          multiple
          :auto-upload="false"
          :limit="limit"
          list-type="picture-card"
          :http-request="fileUpload"
          :on-change="fileOnChange"
          :on-remove="fileOnRemove"
          :on-success="fileOnSuccess"
          :on-exceed="onExceed"
        >
          <i class="el-icon-plus" />
          <div slot="tip" class="el-upload__tip">
            最多可上传{{ limit }}张图片
            <span v-if="limit > 1">，按住Ctrl可以多选</span>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center"><el-button type="primary" :disabled="disableSubmit" size="small" @click="submitUpload" v-text="btnText" /></el-row>
  </el-dialog>
</template>

<script>
export default {
  props: {
    uploadVisible: {
      type: Boolean,
      default: false
    },
    category: {
      type: Array,
      require: true,
      default: _ => {
        return [];
      }
    },
    currentCategory: {
      type: Number,
      default: -1
    },
    limit: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      upload: {
        category: this.currentCategory
      },
      btnText: '确认上传',
      disableSubmit: false,
      uploadList: [],
      attach_ids: [],
      uploading: 0,
      timer: 0
    };
  },
  computed: {
    options() {
      return this.category ? this.category[0].children : [];
    }
  },
  methods: {
    handleClose: function() {
      this.$emit('update:uploadVisible', false);
    },
    /** 手动点击上传方法 */
    submitUpload: function() {
      if (this.uploadList.length == 0) {
        this.$message.warning('请选择要上传的素材');
        return false;
      }
      clearInterval(this.timer);
      this.btnText = '正在上传...';
      this.disableSubmit = true;

      this.uploading = this.uploadList.length;
      this.$refs.upload.submit();
      // 全部上传完成时,提交素材
      this.timer = setInterval(() => {
        // 只有全部上传完成时,再提交
        if (this.attach_ids.length != this.uploading) {
          return false;
        }
        clearInterval(this.timer);
        // 提交绑定素材
        this.$http.post(
          '/admin/material/upload',
          {
            category: this.upload.category,
            material_type: 'picture',
            attach_ids: this.attach_ids
          },
          response => {
            this.$message.success(response.msg);
            this.$emit('update:uploadVisible', false);
            this.$emit('reload');
          },
          error => {
            this.$message.error(error.msg);
          }
        );
      }, 200);
    },
    onExceed: function() {
      this.$message.error('最多一次性上传' + this.limit + '张图片');
    },
    /** 自定义文件上传方法,采用分片上传 */
    fileUpload: function(params) {
      // 分片上传 每2M为一片
      this.$upload.submit(params, true, 2);
    },
    fileOnChange: function(file, fileList) {
      this.uploadList = fileList;
    },
    fileOnRemove: function(file, fileList) {
      const attachId = file.id || (file.response ? file.response.data.id : 0);
      attachId && this.setValue(attachId, false);
    },
    fileOnSuccess: function(response, file, fileList) {
      const attachId = file.id || response.data.id;
      this.setValue(attachId, true);
    },
    setValue: function(attachId, action) {
      if (action === true) {
        // 添加
        this.attach_ids.push(attachId);
      } else {
        this.attach_ids.splice(this.attach_ids.findIndex(item => item === attachId), 1);
      }
    }
  }
};
</script>

<style></style>
